<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Client edit/add</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.2/css/bootstrap.min.css"/>
    <script src="/webjars/jquery/1.11.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script>
        $(function() {
            $('.glyphicon-question-sign').tooltip();
        });
    </script>
</head>
<body>
<div class="container">
    <h1 th:if="!${param.client}" class="page-header">新增客户端</h1>

    <h1 th:if="${param.client}" class="page-header">编辑客户端 <span th:text="${param.client[0]}"></span></h1>

    <div class="row">
        <div class="col-xs-12 col-md-12">
            <div th:if="${param.client}" class="alert alert-warning">编辑客户端将删除所有用户批准和活动令牌.</div>
            <form th:action="'/clients/edit'" method="post">

                <!-- signalize new client -->
                <input type="hidden" th:if="!${param.client}" name="newClient" value="true"/>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="clientId">Client ID</label>
                        <input class="form-control" id="clientId" type="text" name="clientId" th:value="${clientDetails.clientId}"/>
                    </div>
                    <div class="form-group">
                        <label for="clientSecret">Client Secret
                            <span data-toggle="tooltip" data-placement="bottom" class="glyphicon glyphicon-question-sign"
                                  title="用户授权client_secret, authorization_code, refresh_token. 如果留空则不会更新。"></span>
                        </label>
                        <input class="form-control" id="clientSecret" type="password" name="clientSecret"/>
                    </div>
                    <div class="form-group">
                        <label for="registeredRedirectUri">Registered redirect URIs
                            <span data-toggle="tooltip" data-placement="bottom" class="glyphicon glyphicon-question-sign"
                                  title="只有这些URI可以在授权请求中用作重定向uris。 重要的是，没有其他恶意客户端可以通过欺骗用户访问令牌！
                                  用于implicit，authorization_code和refresh_token授权。 逗号分隔列表。"></span>
                        </label>
                        <input class="form-control" id="registeredRedirectUri" name="registeredRedirectUri" type="text"
                               th:value="${clientDetails.registeredRedirectUri} ? ${#strings.setJoin(clientDetails.registeredRedirectUri, ',')} : ''"/>
                    </div>
                    <div class="form-group">
                        <label for="accessTokenValiditySeconds">访问令牌有效性（秒）
                            <span data-toggle="tooltip" data-placement="bottom" class="glyphicon glyphicon-question-sign"
                                  title="访问令牌的有效性，以秒为单位。"></span>
                        </label>
                        <input class="form-control" id="accessTokenValiditySeconds" name="accessTokenValiditySeconds" type="text"
                               th:value="${clientDetails.accessTokenValiditySeconds}"/>
                    </div>
                    <div class="form-group">
                        <label for="refreshTokenValiditySeconds">刷新令牌有效期（秒）
                            <span data-toggle="tooltip" data-placement="bottom" class="glyphicon glyphicon-question-sign"
                                  title="刷新令牌的有效性，以秒为单位。"></span>
                        </label>
                        <input class="form-control" id="refreshTokenValiditySeconds" name="refreshTokenValiditySeconds" type="text"
                               th:value="${clientDetails.refreshTokenValiditySeconds}"/>
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>

                    <button type="button" class="btn btn-default" onclick="history.go(-1)">返回</button>

                    <a href="javascript:history.go(-1)">返回</a>
                </div>

                <div class="col-xs-12 col-md-3">
                    <div class="form-group">
                        <label for="resourceIds">Resource IDs
                            <span data-toggle="tooltip" data-placement="bottom" class="glyphicon glyphicon-question-sign"
                                  title="此客户端可以访问的资源，逗号分隔列表。"></span>
                        </label>
                        <input class="form-control" id="resourceIds" type="text" name="resourceIds" th:value="${#strings.setJoin(clientDetails.resourceIds, ',')}"/>
                    </div>
                    <div class="form-group">
                        <label for="scopes">Scopes
                            <span data-toggle="tooltip" data-placement="bottom" class="glyphicon glyphicon-question-sign"
                                  title="此客户端可以访问的所有范围。 如果它是具有授权的客户端（implicit，authorization_code grant），则用户可以单独选择范围。 逗号分隔列表。"></span>
                        </label>
                        <input class="form-control" id="scopes" type="text" name="scope" th:value="${#strings.setJoin(clientDetails.scope, ',')}"/>
                    </div>
                    <div class="form-group">
                        <label for="authorities">Authorities
                            <span data-toggle="tooltip" data-placement="bottom" class="glyphicon glyphicon-question-sign"
                                  title="客户端拥有的权限，对client_secret授权很重要。 逗号分隔列表。"></span>
                        </label>
                        <input class="form-control" id="authorities" type="text" name="authorities" th:value="${#strings.setJoin(clientDetails.authorities, ',')}"/>
                    </div>
                </div>

                <div class="col-xs-12 col-md-5">
                    <label>授权类型
                    <span data-toggle="tooltip" data-placement="bottom" class="glyphicon glyphicon-question-sign"
                          title="如果选择空，则默认为authorization_code和refresh_token。"></span>
                    </label>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                    描述
                                </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse">
                            <div class="panel-body">
                                <ul>
                                    <li><b>client_credentials</b>

                                        <p>客户端可以获取访问令牌，而无需用户使用具有其用户名和密码的基本身份验证从/ token端点进行授权。
                                            仅限受信任的客户。  必须为此授权类型设置客户机密钥。
                                            管理员可以指定客户端在资源服务器上具有的角色。
                                        </p>

                                        <p>您可以想象一个具有管理员角色的客户端脚本，但只读取在您的可信服务器上运行的范围并定期提取一些数据。</p>
                                    </li>
                                    <li><b>implicit</b>

                                        <p>客户端授权后，客户端会直接获取令牌。 使用它的客户应该具有相当有限的范围。</p>

                                        <p>客户端使用/ oauth / authorize？client_id = $ clientId＆amp; response_type = token＆amp; redirect_uri = $ uri端点来获取代码。
                                            在用户授权客户端之后，oauth服务器将使用重定向位置的哈希中的令牌将重定向返回到$ uri。</p>
                                    </li>
                                    <li><b>authorization_code</b>

                                        <p>用户第一次想要访问资源时授权客户端。 作为交换，它获得了从/ token端点获取令牌的代码。 仅限受信任的客户。 客户端必须有一些存储空间来保留令牌。</p>

                                        <p>客户端使用/ oauth / authorize？client_id = $ clientId＆amp; response_type = code＆amp; redirect_uri = $ uri端点来获取代码。
                                            在用户授权客户端之后，oauth服务器将使用重定向位置的哈希中的代码将重定向返回到$ uri。</p>

                                        <p>然后可以在/ oauth / token？code = $ code＆amp; grant_type = authorization_code中使用代码来获取带有它的令牌。
                                            客户端必须在此时使用基本身份验证进行身份验证（即使未使用client_secret授权，也要使用其名称和客户端密钥进行身份验证！）</p>
                                    </li>
                                    <li><b>refresh_token</b></li>
                                    <li><b>password</b>

                                        <p>客户端询问用户他的凭据并转发它们。 仅适用于您自己编写的客户，如手机的官方应用程序。</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="authorizedGrantTypes" value="client_credentials" th:field="*{clientDetails.authorizedGrantTypes}"/>
                            client_credentials
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="authorizedGrantTypes" value="implicit" th:field="*{clientDetails.authorizedGrantTypes}"/>
                            implicit
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="authorizedGrantTypes" value="authorization_code" th:field="*{clientDetails.authorizedGrantTypes}"/>
                            authorization_code
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="authorizedGrantTypes" value="refresh_token" th:field="*{clientDetails.authorizedGrantTypes}"/>
                            refresh_token
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="authorizedGrantTypes" value="password" th:field="*{clientDetails.authorizedGrantTypes}"/>
                            password
                        </label>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
